<script setup lang="ts">
import {ref} from "vue";
import {useAudioPlayerStore} from "@/stores"

const playProgress = ref<HTMLInputElement | null>(null)
const catchProgress = ref<HTMLInputElement | null>(null)
const playerStore = useAudioPlayerStore()

const HandleSetTime = (e:any)=>{
  if(playProgress.value !== null)
  {
    playerStore.setPlayingTime(parseFloat(e.target.value))
  }
}
</script>

<template>
<div class="range">
  <input type="range" class="progress" :value="playerStore.currentTime" :max="playerStore.songTime"  @input="HandleSetTime($event)" ref="playProgress" />
  <input type="range"  class="catch" value="0" ref="catchProgress" disabled />
</div>
</template>

<style scoped lang="scss">

.range{
  width: 100%;
  height: 8px;
  position: relative;
}

input{
  width: 100%;
  height: 8px;
  border: none;
  margin: 0;
  padding: 0;
  position: absolute;
  background-color: transparent;
  top: 0;
  left: 0;
  transition: all 0.3s;
  appearance: none;
  -webkit-appearance: none;
  color: #1ecf9d;
}

.progress{
  z-index: 100;
  overflow: hidden;

  &::-webkit-slider-runnable-track{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    //background: #1ecf9d !important;
    background-color: #dadada;
    height: 2px;
  }

  &::-webkit-slider-container{
    width: 8px;
    overflow: hidden;
  }

  &::-webkit-slider-thumb{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius:50%;
    //color:  #1ecf9d;
    background-color: #1ecf9d;
    height: 2px;
    width: 2px;
    //box-shadow: calc(-50vw - 4px) 0 0 50vw #1ecf9d;
    //transform: translateY(px);
    border: 1px solid transparent;
    border-image: linear-gradient(#1ecf9d,#1ecf9d) 0 fill / 3 1 3 0 / 3px 0 3px 20000px;
  }

  &:hover{
    &::-webkit-slider-thumb{
      height: 8px;
      width: 8px;
      transform: translateY(-3px);
      border-image: linear-gradient(#1ecf9d,#1ecf9d) 0 fill / 6 7 6 0 / 3px 0 3px 20000px;
    }
  }

}

.catch{
  z-index: 1;
  display: none;
  &::-webkit-slider-thumb{
    display: none;
  }
}
</style>